"use strict";
const men = [
    {
        title: '一级办公管理',
        children: [
            {
                title: '二级请假申请',
                children: [
                    {
                        title: '三级请假记录'
                    }
                ]
            },
            {
                title: '二级出差申请'
            }
        ]
    },
    {
        title: '一级系统设置',
        children: [
            {
                title: '二级权限管理',
                children: [
                    {
                        title: "三级用户角色",
                    },
                    {
                        title: "三级菜单设置"
                    }
                ]
            }
        ]
    }
];
var col;
(function (col) {
    col[col["red"] = 1] = "red";
    col[col["skyblue"] = 2] = "skyblue";
    col[col["yellow"] = 3] = "yellow";
})(col || (col = {}));
let dum = 0;
const Box = document.querySelector('.box');
//  递归渲染
const menArrs = (arr, dum) => {
    dum += 1;
    const newArr = arr.map(item => {
        return `<div >
                <p class="ps" style="background:${col[dum]}">${item.title}</p>
                ${!item.children ? '' : `<div class="men">
                ${menArrs(item.children, dum)}
                </div>`}
         </div>`;
    }).join('');
    return newArr;
};
const btn = () => {
    // 伪数组转数组获取所有的P
    const dis = Array.from(document.querySelectorAll('.ps'));
    // console.log(dis)
    // 循环遍历添加点击事件
    dis.forEach(item => {
        item.addEventListener('click', (e) => {
            // 判断下一个兄弟元素节点
            if (item.nextElementSibling) {
                let num = e.target.nextElementSibling.style.display;
                // 是否显示
                if (num === 'block') {
                    e.target.nextElementSibling.style.display = 'none';
                }
                else {
                    e.target.nextElementSibling.style.display = 'block';
                }
            }
        });
    });
};
const render = () => {
    Box.innerHTML = menArrs(men, dum);
    btn();
};
render();
